<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <div>
            <p class="one" ref="one">{{count}}</p>
            <button @click="count++">点击</button>
        </div>
        <ul class="list">
            <li v-for="n,i in 10" :key="i" ref="two">{{n}}</li>
        </ul>
    </div>
    <div>
        <p class="two">123123</p>
    </div>
</body>
<script>

    // 监听到数据发生改变, 获取标签内的文本

    var vm = new Vue({
        el: "#app",
        data: {
            count: 1,
        },
        computed: {

        },
        watch: {
            count: function (newVal, oldVal) {

                // 原生 获取元素的方法=>查找范围是整个文档
                // var one = document.querySelector(".one");
                // console.log(one);

                // var two = document.querySelector(".two");
                // console.log(two);

                // Vue认为 通过Vue实例查找元素时,应该只能查找挂载的元素el 范围内的元素
                // Vue 提供了 ref属性 和 用于获取元素的 $ref  

                // ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件

                // 如何使用
                // 1. 给需要获取的元素绑定ref属性  =>  ref="属性名"
                // 2. 通过Vue实例上$refs属性 对应属性名获取  this.$refs.xxx

                // 注意: 在v-for上使用ref属性时, 会将相同属性名的元素整合到数组中,存在 $refs的对应属性名上

                // console.log(this.$refs.one);

            }
        },
        mounted() {
            console.log(this.$refs);
            console.log(this.$refs.one);
            console.log(this.$refs.two);
        },
    })

    console.log(vm);



</script>

</html>